<template>
	<div style="width: 100vw; height: 80vh;">
		<el-button type="primary" @click="addForm">添加</el-button>
		<el-button type="success">批量删除</el-button>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="ID" width="180" />
			<el-table-column prop="title" label="标题" width="180" />
			<el-table-column label="图片" width="180">
				<template #default="scope">
					<div> <img :src="scope.row.pic" width="100" /></div>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" />
			<el-table-column prop="orders" label="排序" />
			<el-table-column label="操作" width="180">
				<template #default="scope">
					<el-button type="primary" @click="editTable(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 40]"
			:disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
			:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

		<el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%" :before-close="handleClose">
			<div>
				<formItems ref="formRef" :data="formRule"></formItems>
			</div>
			<template #footer>
				<span class="dialog-footer">

					<el-button @click="dialogVisible = false">关闭</el-button>
					<el-button type="primary" @click="formSubmit">
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
	import 'element-plus/es/components/table/style/css'
	import 'element-plus/es/components/pagination/style/css'
	import 'element-plus/es/components/button/style/css'
	import 'element-plus/es/components/dialog/style/css'
	import 'element-plus/es/components/message-box/style/css'
	import { ElTable, ElTableColumn, ElPagination, ElButton, ElMessageBox, ElDialog } from "element-plus"
	import { reactive, ref } from "vue"
	import axios from "../../utils/axios"

	import formItems from "./components/form.vue"

	const formRef = ref()
	const tableData = ref([])
	// 当前页码
	const currentPage4 = ref(1)
	const pageSize4 = ref(10)
	const background = ref(false)
	const disabled = ref(false)
	const total = ref(0)


	const list = () => {
		axios.get(
			"/3003api/getAd",
			{
				params: { nowPage: currentPage4.value, pageLen: pageSize4.value }
			}
		).then(e => {
			console.log(e.data.list)
			tableData.value = e.data.list
			total.value = e.data.total
		})
	}



	list()


	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
		pageSize4.value = val
		list()
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
		currentPage4.value = val
		list()

	}

	const dialogVisible = ref(false)

	const handleClose = (done : () => void) => {
		ElMessageBox.confirm('是否取消添加？')
			.then(() => {
				done()
			})
			.catch(() => {
				// catch error
			})
	}
	const dialogTitle = ref("添加")
	const formRule = ref({
		title: "",
		pic: "",
		status: "",
		orders: ""
	})
	const formSubmit = async () => {

		let res = await formRef.value.submit()
		// id存在 进行修改操作 
		if (res.id) {
			axios.post("/3003api/editAd", res).then(e => {
				// console.log(e)
				list()
				dialogVisible.value = false
			})
		} else {
			axios.post("/3003api/addAd", res).then(e => {
				// console.log(e)
				list()
				dialogVisible.value = false
			})
		}


		// console.log(res,116)
	}
	const addForm = () => {
		formRule.value = {
			title: "",
			pic: "",
			status: "",
			orders: ""
		}
		dialogVisible.value = true
	}
	const editTable = (data) => {
		formRule.value = { ...data }
		dialogTitle.value = "编辑"
		dialogVisible.value = true

	}
</script>